<template>
  <view class="container-gray">
    <!-- 顶部状态栏占位view -->
    <!-- <view class="status_bar">
			<view class="top_view"></view>
    </view>-->

    <!-- 一级分类 -->
    <!-- <view class="cate-box">
			<view class="cate-title" :class="idx==1?'cate-active':''" style="border-radius: 30upx 0 0 30upx;" @tap="changeCate(1)">名师讲习</view>
			<view class="cate-title" :class="idx==2?'cate-active':''" style="border-radius: 0 30upx 30upx 0;" @tap="changeCate(2)">矿校远教</view>
    </view>-->

    <!-- <scroll-view scroll-x class="head-tab">
			<view class="head flex-box">
				<view class="tab-bar-item" v-for="(item,index) in tabBars" :key="index" @click="changeTabs(index,item.id)">
					<view class="tab-bar-title" :class="tabIndex === index?'sub-cate-active':''">{{item.name}}</view>
					<view class="underline" v-if="tabIndex === index"></view>
				</view>
			</view>
    </scroll-view>-->

    <view class="status_bar">
      <view class="top_view"></view>
    </view>

    <view class="fixed-box">
      <view class="tab-bar">
        <view
          style="width: 120upx; height: 60upx;position: absolute;text-align: center;top: 16upx;"
        >
          <image
            src="../../static/icon/icon-back.png"
            mode="aspectFill"
            style="width: 25upx; height: 39.5upx;"
            @click="back"
          />
        </view>
        <view style="flex: 1;text-align: center;">{{title}}</view>
      </view>
      <!-- <scroll-view scroll-x class="tab">
					<view class="head flex-box">
						<view class="tab-bar-item" v-for="(item,index) in tabBars" :key="index" @click="changeTabs(index,item.id)">
							<view class="tab-bar-title" :class="tabIndex === index?'sub-cate-active':''">{{item.name}}</view>
							<view class="underline" v-if="tabIndex === index"></view>
						</view>
					</view>
      </scroll-view>-->
    </view>

    <view style="height: calc(100% - 100upx);margin-top: 80upx;background: #FFFFFF;">
      <!-- 名师讲习 -->
      <view v-if="tabIndex == 0">
        <view v-if="courseList.length>0">
          <view
            class="train-info-box"
            v-for="(item,index) in courseList"
            :key="index"
            style="flex-direction: column;"
            @click="applyCourse(item.id)"
          >
            <image
              style="width: 650upx;height: 246upx;border-radius:16upx;"
              :src="item.mainImgUrl"
              mode="aspectFill"
            />
            <view>
              <view style="padding: 20upx 0;border-bottom: 1px solid #E6E6E6;">
                <view class="info-title">{{item.title}}</view>
                <view v-if="item.courseBrief" class="info-brief">{{item.courseBrief}}</view>
              </view>
              <view style="display: flex;justify-content: space-between;margin-top: 20upx;">
                <view class="info-tips">
                  <image src="../../static/icon/icon-date.png" style="width: 28upx;height: 26upx;" />
                  <text style="color: #888888;margin-left: 10upx;">{{item.trainStartTime}}</text>
                </view>
                <button
                  v-if="item.entryStatus == 0"
                  type="primary"
                  class="primary"
                  style="font-size: 26upx;margin-right: 0;width: 240upx;border-radius: 36upx;height: 60upx;"
                  @click="applyCourse(item.id)"
                >+ 报名</button>
                <button
                  v-if="item.entryStatus == 1"
                  type="primary"
                  class="primary"
                  style="font-size: 26upx;margin-right: 0;width: 240upx;border-radius: 36upx;height: 60upx;"
                  @click="applyCourse(item.id)"
                >已报名</button>
                <button
                  v-if="item.entryStatus == 2"
                  type="primary"
                  class="primary"
                  style="font-size: 26upx;margin-right: 0;width: 240upx;border-radius: 36upx;height: 60upx;"
                  @click="applyCourse(item.id)"
                >报名已结束</button>
              </view>
            </view>
          </view>
          <uni-load-more :status="courseLoadingType" :contentText="contentText"></uni-load-more>
        </view>
        <view v-else class="tips">暂无相关内容</view>
      </view>

      <!-- 矿校远教 -->
      <view v-else>
        <!-- <view v-if="dataList.length>0">
					<view v-if="item.type == 1" class="info-box" v-for="(item,index) in dataList" :key="index">
						<image class="info-img" :src="item.img" mode="aspectFill"/>
						<view style="margin-left: 28upx;flex:1;display: flex;flex-direction: column;">
							<view class="info-title">{{item.title}}</view>
							<view class="info-tips">
							</view>
							<button type="primary" class="primary apply-btn" @click='goStudy(item.id)'>学习</button>
						</view>
					</view>
					<view v-if="item.type == 2" v-for="(item,index) in dataList" :key="index">
						<video :src="item.videoPath" :poster="item.mainImg" style="width: 750upx;height: 420upx;"></video>
						<image :src="item.img" style="width: 750upx;height: 420upx;"/>
						<view class="flex-box" style="padding: 32upx;border-bottom: 1px solid #EDEDED;margin-bottom: 30upx;">
							<view style="width: 400upx;font-size:26upx;color: #222222;margin-right: 20upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{item.title}}</view>
							<view style="font-size:26upx;color: #02A8F4;white-space: nowrap;" @click="goDetail(item.id)">查看视频简介及评价</view>
						</view>
					</view>
					<uni-load-more :status="dataLoadingType" :contentText="contentText"></uni-load-more>
        </view>-->
        <view v-if="dataList.length>0">
          <view v-for="(item,index) in dataList" :key="index">
            <view v-if="item.type == 1" class="flex-box course-info-box" @click="goStudy(item.id)">
              <image class="info-img" :src="item.img" options mode="aspectFill" />
              <view style="margin-left: 20upx;flex:1;">
                <view class="info-title" style="height: 120upx;">{{item.title}}</view>
                <view class="news-time">
                  <img class="icon" src="/static/icon/icon-date.png" />
                  {{item.createTime}}
                </view>
              </view>
            </view>
            <view v-if="item.type == 2" class="course-video-box" @click="goDetail(item.id)">
              <image :src="item.img" style="width: 750upx;height: 420upx;" mode="aspectFill" />
              <view
                class="flex-box"
                style="padding: 32upx;border-bottom: 1px solid #EDEDED;margin-bottom: 30upx;"
              >
                <view
                  style="width: 400upx;font-size:26upx;color: #222222;margin-right: 20upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                >{{item.title}}</view>
                <view
                  style="font-size:26upx;color: #02A8F4;white-space: nowrap;"
                  @click="goDetail(item.id)"
                >查看视频简介及评价</view>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="tips">暂无相关内容</view>
      </view>
    </view>
  </view>
</template>

<script>
import { post_md5 } from '../../common/request'
import { dateUtils } from '../../common/common'
var coursePage = 1,
  dataPage = 1
export default {
  data() {
    return {
      idx: 1,
      tabIndex: 0,
      tabBars: [],
      tabId: '',
      courseLoadingType: 'more', //定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
      dataLoadingType: 'more',
      contentText: {
        contentdown: '上拉加载更多',
        contentrefresh: '正在加载...',
        contentnomore: '没有更多数据了'
      },
      courseList: [],
      dataList: [],
      time: null,
      title: '',
      logo: ''
    }
  },
  onLoad(options) {
    this.getTab()
    this.getSysInfo()
  },
  onShow() {
		let data = JSON.parse(uni.getStorageSync('appinfo') || '{}')
    this.title = data.traintitle
    this.logo = data.logoUrl
    if (this.tabIndex == 0) {
      coursePage = 1
      this.courseList = []
      this.courseLoadingType = 'more'
      this.getTrainCourseList()
      this.time = new Date().getTime()
    } else {
      dataPage = 1
      this.dataList = []
      this.dataLoadingType = 'more'
      this.getDataList()
    }
  },
  onPullDownRefresh: function() {
    //下拉刷新的时候请求一次数据
    if (this.tabIndex == 0) {
      coursePage = 1
      this.courseList = []
      this.courseLoadingType = 'more'
      this.getTrainCourseList()
    } else {
      dataPage = 1
      this.dataList = []
      this.dataLoadingType = 'more'
      this.getDataList()
    }
  },
  onReachBottom: function() {
    if (this.idx == 1) {
      this.getTrainCourseList()
    } else {
      this.getDataList()
    }
  },
  methods: {
    back() {
      uni.navigateBack()
    },
    getSysInfo() {
      const params = {
        type: 3
      }
      // post_md5('/config/getConfigBasicInfo', params).then(res => {
      // 	this.title = res.data.title
      // 	this.logo = res.data.logoUrl
      // })
    },
    // 一级分类切换
    changeCate(index) {
      this.idx = index
      this.dataLoadingType = 'more'
      dataPage = 1
      this.dataList = []
      if (index == 2) {
        this.getTab()
      }
    },

    // 获取二级分类
    getTab() {
      post_md5('/train/getTrainCateList').then(res => {
        this.tabBars = res.data
        this.tabBars.unshift({
          name: '名师讲习',
          id: '0'
        })
        this.tabId = this.tabBars[this.tabIndex].id
      })
    },

    // 切换二级分类
    changeTabs(index, id) {
      this.tabIndex = index
      if (index == 0) {
        this.getTrainCourseList()
      } else {
        this.tabId = id
        this.dataLoadingType = 'more'
        dataPage = 1
        this.dataList = []
        this.getDataList()
      }
    },

    // 获取名师讲习
    getTrainCourseList() {
      if (this.courseLoadingType !== 'more') {
        //loadingType!=0;直接返回
        return false
      }
      this.courseLoadingType = 'loading'
      uni.showNavigationBarLoading() //显示加载动画
      const params = {
        userId: uni.getStorageSync('userId'),
        page: coursePage
      }
      post_md5('/train/getTrainCourseList', params).then(res => {
        if (res.data) {
          for (let i in res.data.list) {
            this.courseList.push(res.data.list[i])
          }
          if (
            this.courseList.length > 10 ||
            this.courseList.length == res.data.totalCount
          ) {
            this.courseLoadingType = 'noMore'
          } else {
            this.courseLoadingType = 'more'
          }
          uni.hideNavigationBarLoading() //关闭加载动画
        } else {
          this.courseLoadingType = 'noMore'
          uni.hideNavigationBarLoading() //关闭加载动画
        }
        coursePage++
        uni.stopPullDownRefresh()
      })
    },

    // 名师讲习报名
    applyCourse(id) {
      uni.navigateTo({
        url: 'apply?id=' + id
      })
    },

    // 根据分类获取矿校远教内容
    getDataList() {
      if (this.dataLoadingType !== 'more') {
        //loadingType!=0;直接返回
        return false
      }
      this.dataLoadingType = 'loading'
      uni.showNavigationBarLoading() //显示加载动画
      const params = {
        cateId: this.tabId,
        current: dataPage
      }
      post_md5('/train/getTrainDataInfoByCateId', params).then(res => {
        console.log(res)
        if (res.data) {
          for (let i in res.data.list) {
            this.dataList.push(res.data.list[i])
          }
          if (
            this.dataList.length > 10 ||
            this.dataList.length == res.data.totalCount
          ) {
            this.dataLoadingType = 'noMore'
          } else {
            this.dataLoadingType = 'more'
          }
          uni.hideNavigationBarLoading() //关闭加载动画
        } else {
          this.dataLoadingType = 'noMore'
          uni.hideNavigationBarLoading() //关闭加载动画
        }
        dataPage++
        uni.stopPullDownRefresh()
      })
    },

    // 查看视频详情和评论
    goDetail(id) {
      uni.navigateTo({
        url: 'detail?id=' + id
      })
    },

    // 查看学习内容
    goStudy(id) {
      uni.navigateTo({
        url: 'info?id=' + id
      })
    }
  }
}
</script>

<style>
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
  background-color: #ffffff;
}

.top_view {
  height: var(--status-bar-height);
  width: 100%;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  z-index: 999;
}

.fixed-box {
  width: 100%;
  height: 80upx;
  position: fixed;
  top: var(--status-bar-height);
  background: #ffffff;
  z-index: 10;
}

.tab-bar {
  height: 80upx;
  line-height: 80upx;
  color: #000000;
  font-size: 32upx;
  width: 100%;
  background: #ffffff;
}

.tab {
  width: 750upx;
  overflow: hidden;
  /* position: fixed; */
}

/* .status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		background-color: #FFFFFF;
		top: 0;
		z-index: 999;
	} */

.head {
  border-bottom: 1px solid #f5f5f5;
  color: #999999;
  padding: 0;
  height: 96upx;
  margin: 0;
  border: 0;
}

.sub-cate-active {
  /* color: #333333;
		font-weight: 600; */
}

.train-info-box {
  width: 650upx;
  border-radius: 40upx;
  box-shadow: 10upx 6upx 30upx #e2e8ec;
  margin-top: 30upx;
  margin-left: 30upx;
  padding: 20upx;
  display: flex;
  position: relative;
}

.course-info-box {
  margin-left: 30upx;
  padding: 32upx 0;
  border-bottom: 1px solid #eeeeee;
}

.course-video-box {
}

.info-img {
  width: 250upx;
  height: 180upx;
  border-radius: 16upx;
}

.info-title {
  flex: 1;
  font-size: 28upx;
  font-weight: bold;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 40upx;
  padding-right: 30upx;
}

.info-brief {
  font-size: 22upx;
  color: #666666;
  line-height: 30upx;
  height: 60upx;
  margin-top: 10upx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.info-tips {
  font-size: 24upx;
  font-weight: 400;
  color: #848484;
  /* margin-top: 30upx; */
  display: flex;
  align-items: center;
}

.apply-btn {
  min-width: 148upx;
  height: 50upx;
  border-radius: 0px 30upx 30upx 38upx;
  font-size: 26upx;
  margin-right: 0;
  position: absolute;
  bottom: 20upx;
  right: 20upx;
}

.none {
  width: 140upx;
  background: #cccccc;
  color: #ffffff;
  line-height: 44upx;
}

.tips {
  color: #999999;
  text-align: center;
  margin-top: 100upx;
}

.icon {
  width: 28upx;
  height: 26upx;
  margin-right: 10upx;
}
</style>
